<template>
  <div>
    <project-header-top></project-header-top>
    <div class="header">
      <ul>
        <li><span>February 22, 2018</span><span>Bringing creative projects to life.</span></li>
        <li><span>TOTAL BACKERS</span><span>14, 240, 206</span></li>
        <li><span>FUNDED PROJECTS</span><span>139, 353</span></li>
        <li><span>LIVE PROJECTS</span><span>3, 982</span></li>
      </ul>
    </div>
    <!--导航栏-->
    <div class="nav">
      <ul>
        <li v-for="item in navList">{{item}}</li>
      </ul>
    </div>
    <div class="arts">
      <div class="arts-title">
        <span class="linkBlock">Arts</span>
        <span class="linkBlock">VIEW ALL</span>
      </div>
      <div class="arts-left floatLeft">
        <span class="featured block">FEATURED PROJECT</span>
        <div class="arts-left-box">
          <span class="block">Love PositiveWomen</span>
          <span class="block">BY VISUAL AIDS</span>
          <span class="block">26% FUNDED</span>
        </div>
      </div>
      <div class="arts-right floatLeft">
        <ul class="arts-right-menu">
          <li>NEW & NOTEWORTHY</li>
          <li>ALMOST THERE</li>
          <li>POPULAR</li>
        </ul>
        <ul class="funded">
          <li v-for="item in num">
            <span class="li-box"></span>
            <span class="li-text">
              <span class="li-text-misfits">The Melty Misfits: Series 3</span>
              <span>264% funded</span>
            </span>
          </li>
        </ul>
        <button>VIEW ALL</button>
      </div>
      <div class="clear"></div>
    </div>

    <div class="recommend">
      <span class="recommend-title">Recommended for you<span class="title-right">VIEW ALL</span></span>
      <div class="recommend-box floatLeft" v-for="item in num">
        <span class="recommend-box-top"></span>
        <span class="recommend-box-text">Sleep comfortably under blazing sun without sacrificing protection from the cold. SIESTA2 is the most versatile backpacking tent ever.</span>
        <span class="recommend-box-fund">56% funded</span>
      </div>
      <div class="clear"></div>
    </div>

    <div class="read">
      <span class="read-text">“I thik about making work like I’m a termite that’s gnawing through this long tube of wood, and that wood is a lifelong art process.”</span>
      <span class="read-creative">ARTIST PETER BURR IN <span>THE CREATIVE INDEPENDENT</span> A KICKSTATER-PUBLISHED RESOURCE ROR CREATIVE PEOPLE</span>
      <span class="read-more">READ MORE</span>
      <div class="read-box box-left"></div>
      <div class="read-box box-right"></div>
    </div>
    <div class="footer">
      <div class="bottom floatLeft" v-for="item in bottomBoxNum">
        <div class="bottom-top-box">
          <div class="box-block"></div>
          <div class="top-box-text">
            <span>Eleven months in the life of rising indie musician and Kickstarter creator Lucy Dacus</span>
            <span>READ ON THE NEW YORK TIMES</span>
          </div>
        </div>
        <div class="bottom-last-box">
          <span>How embracing culnerability can power innovation, creativity, and change</span>
          <span>READ ON IT”S NICE THAT</span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import projectHeaderTop from '../publicCom/ProjectHeaderTop'

    export default {
        name: "category-arts",
        components:{ projectHeaderTop },
        data(){
            return{
              navList:[ 'Arts', 'Games', 'Food & Ctaft', 'Publishing', 'Comics & Illustration', 'Music', 'Film', 'Design & Tech'],
              num:[ '', '', '', ''],
              bottomBoxNum:[ '', '', '' ]
            }
        }
    }
</script>

<style scoped lang="scss">
.clear{clear: both}
.floatLeft{float: left}
.linkBlock{display: inline-block}
.block{display: block}
input,button{outline: none}
li{list-style: none}
.header{
  box-shadow: 0 -1px 0 0 #1C4650;
  ul{
    height:100px;
    border-bottom: 1px solid #DBDEDD;
    padding-left: 52px;
    span{display: block}
    li{
      display: inline-block;
      padding-left: 45px;
      border-right: 2px solid #DBDEDD;
      height: 100px;
      font-size: 14px;
      span:nth-child(1){
        margin: 29px 0 1px 0;
        font-family: PingFangSC-Regular;
        color: #666666;
        letter-spacing: -1px;
      }
      span:nth-child(2){
        font-family: PingFangSC-Semibold;
        color: #2E2E2E;
        letter-spacing: -0.8px;
      }
    }
    li:nth-child(1){padding-right: 113px;}
    li:nth-child(2){padding-right:151px;}
    li:nth-child(3){padding-right:151px;}
    li:nth-child(4){
      border: none;
      padding-right:246px;
    }
  }
}
  .nav{
    width: 1247px;
    margin: 42px auto;
    padding-top: 30px;
    ul{
      border-bottom: 1px solid #DBDEDD;
      li{
        display: inline-block;
        margin-right: 28px;
        ont-family: PingFangSC-Regular;
        font-size: 16px;
        color: #999999;
        letter-spacing: -0.2px;
        padding-bottom: 10px;
      }
      li:nth-child(1){
        border-bottom:2px solid #2E2E2E;
        color: #2E2E2E;
      }
    }
  }
  .arts{
    padding:0 0 94px 97px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    box-shadow: 0 1px 0 0 #DBDEDD;
    color: #2E2E2E;
    .arts-title{
      font-size: 28px;
      margin-bottom: 34px;
      span:nth-child(2){;
        letter-spacing: -0.2px;
        margin-left: 13px;
        font-size: 12px;
      }
    }
    .arts-left{ .featured{margin-bottom:17px;} }
    .arts-left-box{
      width: 583px;
      height: 606px;
      background: #4D4D4D;
      border: 1px solid transparent;
      padding-left: 23px;
      span{
        background: #FFFFFF;
        text-align: center;
        font-family: PingFangSC-Medium;
        letter-spacing: 0.4px;
      }
      span:nth-child(1){
        width: 278px;
        padding: 2px 9px 4px 13px;
        line-height: 40px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        margin-top: 460px;
      }
      span:nth-child(2){
        width: 125px;
        line-height: 32px;
        font-size: 12px;
        margin-bottom: 13px;
      }
      span:nth-child(3){
        width: 116px;
        line-height: 35px;
        font-size: 14px;
        letter-spacing: -0.4px;
      }
    }

    .arts-right{
      width:605px;
      margin-left:35px;
      font-family: PingFangSC-Regular;
      .arts-right-menu{
        li{
          display: inline-block;
          margin-right: 21px;
          font-size: 12px;
          color: #999999;
          padding-bottom: 16px;
        }
        li:nth-child(1){
          color: #2E2E2E;
          border-bottom: 1px solid #2E2E2E;
        }
      }
      .funded{
          li{
            border-top:1px solid #DBDEDD;
            height: 112px;
            span{
              display: inline-block;
              vertical-align: middle;
              span{display: block}
            }
            .li-box{
              width: 122px;
              height: 70px;
              background: #D8D8D8;
              margin: 21.5px 30px 21.5px 0;
            }
            .li-text{
              font-size: 12px;
              color: #999999;
              letter-spacing: -0.2px;
              .li-text-misfits{
                font-size: 14px;
                color: #2E2E2E;
                margin-bottom: 6px;
              }
            }
          }
      }
      button{
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: -0.4px;
        width: 82px;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        margin-top: 24.5px;
        &:active{
          background: #D8D8D8;
          color: #ffffff;
        }
      }

    }
  }
  .recommend{
    padding: 73px 0 74px 97px;
    border-top:1px solid #DBDEDD;
    border-bottom:1px solid #DBDEDD;
    font-family: PingFangSC-Regular;
    color: #2E2E2E;
    span{display: block}
    .recommend-title{
      font-size: 18px;
      letter-spacing: -0.2px;
      margin-bottom: 40px;
      .title-right{
        font-size: 12px;
        margin-left: 983px;
        display: inline-block;
      }
    }
    .recommend-box{
      width: 285px;
      margin-right:35px;
      .recommend-box-top{
        width: 285px;
        height: 160px;
        background: #565656;
        margin-bottom: 13px;
      }
      .recommend-box-text{
        margin-bottom: 17px;
        font-size: 14px;
        letter-spacing: -0.1px;
        line-height: 21px;
      }
      .recommend-box-fund{
        font-size: 12px;
        color: #808080;
        letter-spacing: -0.1px;
      }
    }
  }
  .read{
    padding-left:98px;
    font-family: ArialMT;
    font-size: 12px;
    color: #2E2E2E;
    span{
      display: block;
      padding-left: 226px;
    }
    .read-text{
      width: 974px;
      font-family: TsukuBRdGothic-Regular;
      font-size: 48px;
      letter-spacing: 0.2px;
      line-height: 64px;
      margin:72px 0 40px 0;
    }
    .read-creative{
      color: #666666;
      line-height: 21px;
      margin-bottom: 12px;
      span{
        font-family: Arial-BoldMT;
        color: #000000;
        display: inline-block;
        padding-left: 0;
      }
    }
    .read-box{
      margin-top: 135px;
      width: 605px;
      height: 265px;
      background: #D8D8D8;
      margin-right: 36px;
      display: inline-block;
    }
  }
  .footer{
    padding-left:98px;
    .bottom{
      margin:190px 37px 0 0;
      span{display: block}
      .bottom-top-box{
        .box-block{
          width: 390px;
          height: 390px;
          background: #434343;
        }
        .top-box-text{
          width: 390px;
          height: 145px;
          padding: 22px 0 0 23px;
          box-sizing: border-box;
          border: 1px solid #DBDEDD;
          span:nth-child(1){
            width: 344px;
            margin-bottom: 40px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #2E2E2E;
            letter-spacing: -0.1px;
            line-height: 21px;
          }
          span:nth-child(2){
            font-family: PingFangSC-Semibold;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: -0.8px;
          }
        }
      }
      .bottom-last-box{
        width: 390px;
        height: 260px;
        border: 1px solid #DBDEDD;
        padding:22px 0 0 21px;
        box-sizing: border-box;
        margin: 60px 0 75px 0;
        color: #2E2E2E;
        span:nth-child(1){
          font-family: PingFangSC-Regular;
          font-size: 14px;
        }
        span:nth-child(2){
          font-family: PingFangSC-Semibold;
          font-size: 12px;
          letter-spacing: -0.8px;
          margin: 18px 0 55px 0;
        }
        span:nth-child(3){
          width: 87px;
          height: 87px;
          background: #222222;
        }
      }
    }
  }

</style>
